<template>
  <div class="login">
     <h1>系统登入</h1>
	 <div class="input-group input-group-lg" id="user">
        <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-user"></span></span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1" v-model="user">
     </div>
     <div class="input-group input-group-lg" id="password">
        <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-ice-lolly-tasted"></span></span>
        <input type="text" class="form-control" placeholder="password" aria-describedby="sizing-addon1" v-model="password">
     </div>
	 <button type="button" class="btn btn-primary" v-on:click="lodgin()">登入</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
     user:"",
	 password:""
    }
  },
  methods:{
      
      lodgin(){
	     
	      var _this = this;
		   console.log(_this.user)
		   console.log(_this.password)
		   var lenths = this.user.length
		   console.log(lenths)
	        this.$axios.get("http://localhost/dudubas/login.php?password="+_this.password+"&name="+_this.user).then(e1=>{
			       var USER = JSON.parse(e1.data.slice(3))[0].user 
				   var PASSWORD = JSON.parse(e1.data.slice(3))[0].password
				   if(this.user == USER && this.password == PASSWORD){
				         this.$store.commit("Login")
				   }
			})
	  }
  }
}
</script>
<style scoped>
.login{
    width:100%;
	height:100vh;
	background:#2c3a4a;
	position:fixed;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.login h1{
    color:#ffffff;
}
.login button{
     width:50%;
	 height:5vh;
	 margin-top:3%;
	 font-size:3rem;
}
#password{
   width:50%;
   margin-top:3%;
}
#user{
    width:50%;
	margin-top:3%;
}
</style>
